<template>
  <div>
    <headNav :isBack="false" :isHome="false" title="通知详情" ></headNav>
    <div class="flexColumn headBigCss" >
      <span>{{detailsList.createTime}}</span>
      <span>尊敬的班主任 以下是学生入校详情，请您检阅!</span>
      <div style="height: 9.5rem;" >
        <x-table style="background-color:#fff; " full-bordered >
          <thead style="background: #e9f5ff; " >
            <tr>
              <th style="width: 3.86rem;" >姓名</th>
              <th style="width: 1rem;" >出入校</th>
              <th style="width: 1.8rem;" >学生状态</th>
            </tr>
          </thead>
        </x-table>
        <div  style="height: 8.5rem; overflow-y: auto;" >
          <x-table full-bordered >
          <tbody>
            <tr v-for="(val, index) in detailsList.abnormalStudents" :key="index" >
              <td style="width: 3.9rem; overflow:hidden; " >{{val.studentName}}</td>
              <td v-if="val.inOutType == 1" style="width: 1rem;" >入校</td>
              <td v-if="val.inOutType == 2" style="width: 1rem;" >出校</td>
              <td class="tdCss" style="width: 1.8rem;" >
                <div style="position: relative; width: 1.8rem;" >
                  <x-switch title=" " :value-map="[0, 1]" v-model="val.status" :disabled="detailsList.isSend" ></x-switch>
                  <span v-if="val.status == 1" style="left: 0.87rem; " @click="!detailsList.isSend ? val.status = 0 : val.status = 1"  >正常</span>
                  <span v-if="val.status == 0" @click="!detailsList.isSend ? val.status = 1 : val.status = 0"  >异常</span>
                </div>
              </td>
            </tr>
          </tbody>
          </x-table>
        </div>
      </div>
      <div style="margin-top: 0.5rem;" >
        <x-button type="primary" style="background: #128fef;" @click.native="stateChange" v-if="!detailsList.isSend" >确定</x-button>
        <x-button disabled v-if="detailsList.isSend" >确定</x-button>
      </div>
    </div>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import { XTable, XSwitch, XButton  } from 'vux'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import {inAndOutList, changeStatusApi, groupPushApi} from '@/api/payApi'
export default {
  components: {
    headNav,
    XTable,
    XSwitch,
    XButton
  },
  data () {
    return {
      detailsList: '',  // 学生出入校详情
      personalData: ''
    }
  },
  async mounted() {
    // location.search
    var search =  location.search  // ?a=1&b=2
    search = search.replace("?", '')  // a=1&b=2
    var arr = search.split("&")  // ["a=1", "b=2"]
    var obj = {}
    for(var item of arr) {
      var list = item.split("=") // ['a', "1"]
      obj[list[0]] = list[1]
    }
    console.log(obj)
    this.personalData = obj
     // obj = {a:1, b:2}

    // parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId
    // parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId
    let res = await this.stateEncapsulation(parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId)
    this.detailsList = res
  },
  methods: {
    // 改变状态确定按钮点击事件
    async stateChange () {
      let val = await this.stateEncapsulation(parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId)
      let arr = []
      for (let i of this.detailsList.abnormalStudents) {
        for (let j of val.abnormalStudents) {
          if (i.studentId == j.studentId  && i.status != j.status) {
            arr.push({
              status: i.status,
              studentId: i.studentId
            })
          }
        }
      }

      await this.changeStatus(parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId, arr)
      let res = await this.stateEncapsulation(parseInt(this.personalData.inOutTimedTaskId), this.personalData.ClassId)
      this.detailsList = res
      this.$vux.toast.text('更改成功，异常已推送', 'middle')
      // this.$router.push('/menu/index')
    },
    // 获取状态封装
    async stateEncapsulation (num, classId) {
      let params = {
        Id: num,
        classId: classId
      }
      let res = await inAndOutList(params)
      return res
    },
    // 更改学生状态封装
    async changeStatus (num, classId, arr) {
      let params = {
        Id: num,
        classId: classId,
        abnormalStudentUpdateDtos: arr
      }
      await changeStatusApi(params)
      let val = {
        Id: num,
        classId: classId
      }
      await groupPushApi(val)
    }
  }
}
</script>

<style scoped lang="less" >
.flexCenter{
  display: flex;
  justify-content: center;
  align-items: center;
}

.flexColumn {
  display: flex;
  flex-direction: column;
}

.headBigCss {
  margin: 0.5rem 0.3rem 0 0.3rem;
  font-size: 0.3rem;
  font-weight: 500;
  span {
    margin-bottom: 0.2rem;
  }
}

.tdCss {
  position: relative;
  span {
    position: absolute;
    top: 0.3rem;
    left: 0.5rem;
    font-size: 0.2rem;
    color: #a5a5a5;
  }
  .weui-btn_primary {
    background: #000000;
  }
}
</style>
<style lang="less" >
.tdCss {
  .weui-switch {
    top: 0.25rem;
  }
  .weui-switch:checked {
    border-color: #128fef;
    background-color: #128fef;
  }
}
</style>
